<template>
  <div>
    <!-- 应用导航区 -->
    <van-tabbar v-model="active" active-color="black" class="Tabbar" route>
      <van-tabbar-item v-for="(item,i) in icon.active" :key="i" :to="icon.path[i]">
        <span>{{icon.title[i]}}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item : icon.inactive[i]" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      icon: {
        active: [
          '/icons/home-active.png',
          '/icons/cates-active.png',
          '/icons/search-active.png',
          '/icons/cart-active.png',
          '/icons/my-active.png'
        ],
        inactive: [
          '/icons/home.png',
          '/icons/cates.png',
          '/icons/search.png',
          '/icons/cart.png',
          '/icons/my.png'
        ],
        title: ['首页', '分类', '搜索', '购物车', '我的'],
        path: ['/home', '/class', '/search', '/shoppingcar', '/myinfo']
      }
    }
  },
}
</script>

<style lang="less" scoped>
.Tabbar {
  border-top: 0.02rem solid #eee;
}
</style>